Graphic Design Path

What a mess! Let’s clean up the paint and start over again

So, you’ve gone through all this graphic design pathway creative mess and have redesigned your game.

What now?

You’ll have to be creative! There are lots of things the game still lacks and so many features that could be improved.

It might help to know how the things you draw actually get to the game screen, so let’s dive into code one more time.

The missing link - how graphics appear on screen

The real drawing action happens in StatsPanel.java and PlayPanel.java.

In the stats panel, you will see that the constructor loads a background image for it, as well as images for player life: If you decide to change these filenames, the code here will have to be changed too.

public StatsPanel() {
    this.setSize(Settings.WINDOW_WIDTH, Settings.STATS_PANEL_HEIGHT);
    this.setBackground(Color.BLACK);
    this.setLayout(null);

    try {
        background  = ImageIO.read(getClass().getResource("/images/statsBar.png"));
        livingHeart = ImageIO.read(getClass().getResource("/images/livingHeart.png"));
        deadHeart   = ImageIO.read(getClass().getResource("/images/deadHeart.png"));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Notice how the background is set to a black colour - you can change this too, or remove it altogether.

The actual drawing takes place in the paintComponent function:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D) g;

    g2.drawImage(background, 0, 0, Settings.WINDOW_WIDTH - LEFT_MARGIN, Settings.STATS_PANEL_HEIGHT, null);

The drawImage function takes an image as the first parameter. The next two are the top-left corner location for where to draw it. The two after are the width and height of the image to draw (it’s perfectly possible to draw only part of an image). The last parameter is something called the image observer, which is not needed for our purposes and thus always null.

If you’re curious about this observer stuff or what you can do with drawing images, the Java documentation pages are quite helpful.

So, this constructor first draws the stats panel background image.

    if (boy != null) {
        for (int i = 0; i < boy.MAX_LIFE; ++i) {
            if (boy.getLife() > i) {
                g2.drawImage(livingHeart, HEARTS_START_X + HEARTS_X_DISTANCE * i, HEARTS_START_Y, HEARTS_SIZE, HEARTS_SIZE, null);
            } else {
                g2.drawImage(deadHeart, HEARTS_START_X + HEARTS_X_DISTANCE * i, HEARTS_START_Y, HEARTS_SIZE, HEARTS_SIZE, null);
            }
        }
    }
}

Then, for each of the player’s lives, a living heart is drawn. For each unit of difference between the maximum lives and the curren’t player’s lives, a dead heart is drawn.

If you wanted to implement, say, collecting coins - displaying the number you have collected here might be a good idea.

The play panel is where the game action is.

Its paintComponent function looks like this:

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    Graphics2D g2 = (Graphics2D) g;

    // Use anti-aliasing to draw smoother images and lines
    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    // Draw the game background
    g2.drawImage(World.backgroundImage, 0, -Settings.TILE_SIZE, Settings.WINDOW_WIDTH, Settings.PLAY_PANEL_HEIGHT, null);

    // Draw the game map
    for (int i = 0; i < World.rows; ++i) {
        for (int j = 0; j < World.cols; ++j) {
            if (!World.map[i][j].empty()) {
                g2.drawImage(World.map[i][j].getImage(), j * Settings.TILE_SIZE, i * Settings.TILE_SIZE, null);
            }
        }
    }

    // Draw the protagonist of the game
    if (boy != null && !boy.getRestoring()) {
        g2.drawImage(boy.getCurrentFrame(), boy.getCurrentX(), boy.getCurrentY(), null);
        // g2.draw(boy.getBoundingBox());
    }
}

The comments do the job of explaining which part does what.

You can see at the bottom where boy.getCurrentFrame() gets called - this is why we didn’t have to change drawing code to implement animations.

If you decide to add new objects or entities to the game, you will need to change this code to draw them too.

This is the end - and a new beginning

You have reached the end of the graphics design pathway, congratulations!

If you have some ideas to implement - make them happen!

Otherwise, feel free to check out what the offer pathways have to offer, perhaps they will inspire you and your teammates.

Here is a portal back to the guide index page. Enjoy the journey!